<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <nav>
          <el-menu
              :default-active="activeIndex"
              mode="horizontal"
              @select="handleSelect"
          >
            <el-menu-item index="1">
              <RouterLink to="/system">SystemView</RouterLink>
            </el-menu-item>
            <el-menu-item index="3">
              <RouterLink to="/process">ProcessView</RouterLink>
            </el-menu-item>
            <el-menu-item index="4">
              <RouterLink to="/log">LogView</RouterLink>
            </el-menu-item>
          </el-menu>
        </nav>
      </el-header>
      <el-main>
        <main>
          <RouterView/>
        </main>
      </el-main>
      <el-footer>
        <div class="footer-info">
          <el-divider>
            <el-icon><star-filled /></el-icon>
          </el-divider>
          <p>Powered by Vue.js © 2015-2025 柠檬科技（lemon）. All Rights Reserved.</p>
        </div>
      </el-footer>
    </el-container>


  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import { StarFilled } from '@element-plus/icons-vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  activeIndex.value = key
}
</script>

<style scoped lang="scss">
.common-layout {
  .el-header {
    padding: 0;
    text-align: right;
  }

  .el-container {
    min-height: 100vh;
  }

  .footer-info {
    //position: absolute;
    //bottom: 0;
    //width: 95%;
    text-align: center;
  }
}
</style>